<template>
  <el-upload drag action="" :show-file-list="false" :auto-upload="false" :on-change="handleChange">
    <!-- <el-button>上传Excel文件</el-button> -->
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      将文件拖到此处，或<em>点击上传</em>
    </div>
  </el-upload>
  <div class="upload-desc"> 
    <div class="download" @click="onDownloadDome">点击下载Excel模版</div>
  </div>
  <div v-if="fileData.code" class="contract_show">
    <div class="contract_show_left">
      <img class="contract_show_img" src="/static/file/xls.png" alt="" />
      <span class="contract_show_name">{{ fileData.name }}</span>
    </div>
    <el-icon class="contract_show_delete" @click="onDeleteFile">
      <DeleteFilled />
    </el-icon>
  </div>
</template>
<script lang="ts" setup>
  import { downloadTemplate, downloadQyCustomerTemplte } from '@/api/customer/manage/list'
  import { uploadFile2 } from '@/api/common'
  import { reactive, ref, withDefaults, defineProps, defineEmits } from 'vue'
  import { ElMessage } from 'element-plus'

  interface Props {
    typeData: any
    customerType: any
  }
  const props = withDefaults(defineProps<Props>(), {
    typeData: () => ({ type: 1, object_type: 1, name: '个人客户模板' }),
    customerType: 1
  })
  const rule = reactive({
    type: 'xlsx|XLSX',
    unit: 'MB',
    size: 20
  })
  const emit = defineEmits(['submit', 'del'])
  const fileData = ref({
    url: '',
    code: '',
    name: ''
  })
  // 下载dome
  const onDownloadDome = () => {
    console.log('客户模板类型', props.customerType)

    props.customerType == 1
      ? downloadTemplate({ type: props.customerType }).then((res: any) => {
          console.log(res, '模板')
          window.open(res.file_url)
        })
      : downloadQyCustomerTemplte({ type: props.customerType }).then((res: any) => {
          console.log(res, '模板')
          window.open(res.file_url)
        })
  }
  const custNum = ref(0)
  const handleChange = (file: any) => {
    const fileName = file.name.split('.')
    if (!rule.type.includes(fileName.pop())) {
      ElMessage.error('上传文件类型不正确, 请重新上传!')
      return
    }
    if (rule.unit === 'MB') {
      if (file.size / 1024 / 1024 > rule.size) {
        ElMessage.error('文件大小不能超过' + rule.size + 'MB')
        return
      }
    }
    console.log('导入文件', props.typeData)
    uploadFile2({
      file: file.raw,
      fileName: file.name
    }).then((res: any) => {
      emit('submit', res)
      fileData.value = res
    })
  }
  const onDeleteFile = () => {
    fileData.value = {
      url: '',
      code: '',
      name: ''
    }
    custNum.value = 0
    emit('del')
  }
</script>
<style lang="scss" scoped>
  .contract_show {
    width: 440px;
    height: 32px;
    padding: 0 5px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;

    .contract_show_left {
      display: flex;
      align-items: center;

      .contract_show_img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      .contract_show_name {
        width: 400px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .contract_show_delete {
      cursor: pointer;

      &:hover {
        color: red;
      }
    }
  }
  .customer {
    font-family: STHeitiSC-Light, STHeitiSC;
    font-size: 14px;
    line-height: 14px;
    margin-top: 10px;
    color: #33302d;
    .num {
      color: #ff6b00;
    }
  }
  .download {
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    color: #ff6b00;
    cursor: pointer;
  }
  .upload-desc {
    margin-top: 6px;
    color: #969696;
    font-size: 14px;
    color: #696969;
    display: flex;
    justify-content: space-between;
  }
</style>
